import 'package:blurb/common/routers/names.dart';
import 'package:blurb/common/store/store_provider.dart';
import 'package:blurb/common/values/images.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _usernameController = TextEditingController(text: 'test1');
  final _passwordController = TextEditingController(text: '654321');
  final _userStore = StoreProvider().userStore;
  bool _obscureText = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(MIP.background),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 返回按钮
              SizedBox(height: 10.h),
              Padding(
                padding: EdgeInsets.only(left: 16.0.w),
                child: IconButton(
                  icon: Icon(
                    Icons.arrow_back_ios_new,
                    color: Colors.white,
                    size: 28.sp,
                  ),
                  onPressed: () {
                    // 使用go_router返回到引导页
                    context.go(RNS.guide);
                  },
                ),
              ),

              // 中间部分
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    // Logo
                    Center(
                      child: Image.asset(
                        MIP.logo2,
                        width: 100.w,
                        height: 100.h,
                      ),
                    ),

                    SizedBox(height: 20.h),

                    // Blurb 标题
                    Center(
                      child: Text(
                        'Blurb',
                        style: GoogleFonts.racingSansOne(
                          color: Colors.white,
                          fontSize: 40.sp,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),

                    SizedBox(height: 60.h),

                    // 用户名输入框
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 30.0.w),
                      child: Container(
                        height: 56.h,
                        decoration: BoxDecoration(
                          color: Colors.transparent,
                          borderRadius: BorderRadius.circular(12.r),
                          border: Border.all(
                            color: const Color(0xFF60C3FF).withOpacity(0.7),
                            width: 2.w,
                          ),
                        ),
                        child: Padding(
                          padding: EdgeInsets.symmetric(
                            horizontal: 16.0.w,
                            vertical: 2.h,
                          ),
                          child: TextField(
                            controller: _usernameController,
                            style: GoogleFonts.inter(color: Colors.white),
                            decoration: InputDecoration(
                              hintText: 'Input Username',
                              hintStyle: GoogleFonts.inter(
                                color: Colors.white70,
                                fontSize: 12.sp,
                                fontWeight: FontWeight.w500,
                              ),
                              border: InputBorder.none,
                            ),
                          ),
                        ),
                      ),
                    ),

                    SizedBox(height: 16.h),

                    // 密码输入框
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 30.0.w),
                      child: Container(
                        height: 56.h,
                        decoration: BoxDecoration(
                          color: Colors.transparent,
                          borderRadius: BorderRadius.circular(12.r),
                          border: Border.all(
                            color: const Color(0xFF60C3FF).withOpacity(0.7),
                            width: 2.w,
                          ),
                        ),
                        child: Padding(
                          padding: EdgeInsets.symmetric(
                            horizontal: 16.0.w,
                            vertical: 2.h,
                          ),
                          child: Row(
                            children: [
                              Expanded(
                                child: TextField(
                                  controller: _passwordController,
                                  obscureText: _obscureText,
                                  style: GoogleFonts.inter(color: Colors.white),
                                  decoration: InputDecoration(
                                    hintText: 'Input Password',
                                    hintStyle: GoogleFonts.inter(
                                      color: Colors.white70,
                                      fontSize: 12.sp,
                                      fontWeight: FontWeight.w500,
                                    ),
                                    border: InputBorder.none,
                                  ),
                                ),
                              ),
                              // 显示/隐藏密码按钮
                              IconButton(
                                icon: Icon(
                                  _obscureText
                                      ? Icons.visibility_off
                                      : Icons.visibility,
                                  color: Colors.white70,
                                ),
                                onPressed: () {
                                  setState(() {
                                    _obscureText = !_obscureText;
                                  });
                                },
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),

                    SizedBox(height: 10.h),

                    // 注册提示文本
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 30.0.w),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Text(
                            'Don\'t have an account ? ',
                            style: GoogleFonts.racingSansOne(
                              color: Colors.white70,
                              fontWeight: FontWeight.normal,
                              fontSize: 14.sp,
                            ),
                          ),
                          SizedBox(width: 10.w),
                          GestureDetector(
                            onTap: () {
                              // 跳转到注册页面
                              context.go(RNS.register);
                            },
                            child: Text(
                              'Sign up',
                              style: GoogleFonts.racingSansOne(
                                color: Colors.white,
                                fontSize: 14.sp,
                                fontWeight: FontWeight.normal,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),

              // 底部按钮区域
              Padding(
                padding: EdgeInsets.symmetric(
                  horizontal: 30.0.w,
                  vertical: 20.0.h,
                ),
                child: Column(
                  children: [
                    // 登录按钮
                    GestureDetector(
                      onTap: _userStore.isLoading ? null : _handleLogin,
                      child: Container(
                        width: double.infinity,
                        height: 56.h,
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            begin: Alignment(0.50, 0.00),
                            end: Alignment(0.50, 0.96),
                            colors: [
                              const Color(0xFF60C3FF),
                              const Color(0xFFAADEFC),
                            ],
                          ),
                          borderRadius: BorderRadius.circular(13.r),
                        ),
                        child: Center(
                          child: Text(
                            'Log in',
                            style: GoogleFonts.racingSansOne(
                              color: Colors.white,
                              fontSize: 16.sp,
                              fontWeight: FontWeight.normal,
                            ),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 16.h),

                    // Apple登录按钮
                    Container(
                      width: double.infinity,
                      height: 56.h,
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.circular(12.r),
                        border: Border.all(
                          color: Colors.white.withOpacity(0.4),
                        ),
                      ),
                      child: GestureDetector(
                        onTap: () {
                          // Apple登录逻辑
                        },
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(Icons.apple, color: Colors.white, size: 28.sp),
                            SizedBox(width: 8.w),
                            Text(
                              'Continue with Apple',
                              style: GoogleFonts.inter(
                                color: Colors.white,
                                fontSize: 14.sp,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 处理登录
  Future<void> _handleLogin() async {
    String username = _usernameController.text.trim();
    String password = _passwordController.text.trim();

    bool success = await _userStore.login(username, password);
    if (success) {
      context.go(RNS.main);
    }
  }
}
